<template>
  <div>
    {{ str }}
    <input type="text" v-model="str">
    {{ num }}
    <button @click="handleAdd">点击</button>
  </div>
</template>

<script>
import { defineComponent, isRef, ref, unref } from 'vue';

export default defineComponent({
  setup() {
    // ref是组合式api的一个方法，作用是定义一个响应式数据
    const str = ref('李唯一')
    const num = ref(10)
    const handleAdd = () => {
      console.log(num.value)
      // 被ref包裹着的数据取赋值的时候 必须加上value 渲染页面不需要加
      num.value++
      // unref 可以直接提取value值
      const val = unref(str)
      console.log(val, 'val')

      // 判断是否是ref对象
      console.log(isRef(str)) //true
    }

    return {
      str, num, handleAdd
    }
  }
})
</script>

<style lang="scss" scoped></style>